<template>
    <div class="editor_box">
        <div class="header_box">
            <div class="left_box">
                <div class="single_button_left">
                    <img @click="changeChoose('ts')" src="../assets/img/js.png" />
                </div>
                <div class="single_button_left" style="margin-left:8px">
                    <img @click="changeChoose('vue')" src="../assets/img/qh.png" />
                </div>
            </div>

            <div class="middle_box">
                {{ middleText }}
            </div>
            <div class="right_box">
                <div class="single_button_right resh_box">
                    <img class="image_1" src="../assets/img/sx.png" />
                    <span>重置</span>
                </div>
                <div class="single_button_right" style="margin-left: 12px;">
                    <img src="../assets/img/play.png" />
                    <span>运行</span>
                </div>
            </div>
        </div>
        <div class="editor_body">
            <div class="ace_editor_ts" v-show="ccvalue === 'ts'" ref="aceEditorTs" id="ace_editor_ts"></div>
            <div class="ace_editor_html" v-show="ccvalue === 'vue'" ref="aceEditorHtml" id="ace_editor_html"></div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from "vue";
import * as ace from "ace-builds";
import "ace-builds/src-noconflict/mode-javascript"; // 语言模式
import "ace-builds/src-noconflict/theme-monokai"; // 主题
import "ace-builds/src-noconflict/ext-language_tools"; // 语法提示
import "ace-builds/src-noconflict/snippets/javascript"; // 语法段提示模块
const props = defineProps({
    tsTextValue: {
        type: String,
        default: '',
    },
    htmlTextValue: {
        type: String,
        default: '',
    }
});

let map: any = null;
let editorTs: any = null;
let editorVue: any = null;
const aceEditorTs = ref()
const aceEditorHtml = ref()
const ccvalue = ref("ts");
const middleText = ref("JS代码");
const initEditor = (editor: any, cref: any, value: any, type: string) => {
    const options = {
        theme: 'ace/theme/monokai', // 设置语法高亮主题
        mode: 'ace/mode/javascript', // 设置语法 mode
        tabSize: 1,
        maxLines: 1000,
        minLines: 1000,
        fontSize: 16,
        printMarginColumn: 20,
        showPrintMargin: false,
        useWorker: true,
        showLineNumbers: true, // 显示行号
        showGutter: true, // 显示行号区域
        highlightActiveLine: false,
        highlightSelectedWord: false, // 高亮选中文本
        readOnly: false, // 控制编辑器是否只读
        enableSnippets: true, // 启用代码段提示
        enableLiveAutocompletion: true, // 启用实时自动完成
        enableBasicAutocompletion: true,  // 启用基本自动完成
    }
    if (editor) {
        editor.destroy();
    }
    // 初始化
    editor = ace.edit(cref, options);
    // 切换自动换行
    editor.getSession().setUseWrapMode(true);
    editor.setValue(value);
    if (type === 'vue') {
        editor.setReadOnly(true);
    } else {
        editor.on("change", () => {
            //   emits("update:value", editor.getValue());
        })
    }
}
const editSetValue = (editor: any, value: any) => {

}
const changeChoose = (type: string) => {
    ccvalue.value = type;
    if (type === "ts") {
        middleText.value = "JS代码"
    } else {
        middleText.value = "VUE代码（只读）"
    }
}
//ts 的内容的string的格式
const tsContext = (str: String) => {
    initEditor(editorTs, aceEditorTs.value, str, 'ts')
}
//vue 的内容的string的格式
const vueContext = (str: String) => {
    initEditor(editorVue, aceEditorHtml.value, str, 'vue')
}


onMounted(() => {
    nextTick(() => {
        if (props.tsTextValue) {
            tsContext(props.tsTextValue)
        }
        if (props.htmlTextValue) {
            vueContext(props.htmlTextValue)
        }
    })
})
watch(props.tsTextValue, (value: String) => {
    if (value) {
        tsContext(value)
    }
})
watch(props.htmlTextValue, (value: String) => {
    if (value) {
        vueContext(value)
    }
})
</script>
<style lang="scss">
.editor_box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .header_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
        background-color: #272822;
        border-bottom: 1px solid #40a9ff;
    }

    .left_box {
        margin-left: 8px;
        width: 52px;
        display: flex;
        align-items: center;
    }

    .middle_box {
        color: #fff;
    }

    .right_box {
        margin-right: 8px;
        display: flex;
        align-items: center;
    }

    .single_button_left {
        width: 24px;
        height: 24px;
        background-color: #3ea6ff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;

        img {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

        img:hover {
            transform: scale(1.2)
        }
    }

    .single_button_right {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        color: #40a9ff;
        font-size: 14px;
        cursor: pointer;

        img {
            width: 16px;
            height: 16px;
        }

        span {
            margin-left: 4px;
        }

        .image_1:hover {
            transform: rotate(720deg);
            transition: transform 1s;
        }
    }

    .resh_box:hover .image_1 {
        transform: rotate(720deg);
        transition: transform 1s;
    }

    .single_button_active {
        // border: 1px solid #266fe8 !important;
        background-color: #266fe8;
    }

    .editor_body {
        width: 100%;
        height: calc(100% - 32px);
        background-color: #272822;
    }

    #ace_editor_ts {
        height: 100% !important;
        width: 100%;
    }

    #ace_editor_html {
        height: 100% !important;
        width: 100%;
    }
}
</style>
<style>
.ace_content {
    height: 100% !important;
    overflow-x: hidden;
    overflow-y: auto;
}

.ace_selection {
    background: transparent !important;
}
.ace_text-layer{
    width: 100% !important;
    min-height: 80%;
    max-height: 800%;
}
::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 1px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 5px;
  }
  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background:#40a9ff;
  }
  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ffffff;
  }
   /* 隐藏滚动条 */
  .ace_editor_ts ::-webkit-scrollbar {
    display: none !important;
  }
   /* 隐藏滚动条 */
  .ace_editor_html ::-webkit-scrollbar {
    display: none !important;
  }
  
</style>
